{% extends 'buyer/base.html' %}

{% block title %}
    首页
{% endblock %}



{% block content %}
    <menu class="container">
        <div class="col-xs-12 col-sm-2">
            <ul class="list-group">
                <li class="list-group-item active">全部商品分类</li>
            </ul>

        </div>
        <div class="col-xs-12 col-sm-10">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">首页</a></li>
                <li role="presentation"><a href="#">手机生鲜</a></li>
                <li role="presentation"><a href="#">抽奖</a></li>
            </ul>
        </div>
    </menu>
    <article class="container">
        <p class="col-xs-12">全部分类 > 新鲜水果 > 商品详情</p>
    </article>
    <section class="container">
        <div class="col-xs-12 col-sm-5">
            <img src="/static/{{ goods.picture }}"/>
        </div>
        <div class="col-xs-12 col-sm-7">
            <h2 class="title">{{ goods.goods_name }}</h2>
            <p>{{ goods.goods_description }}</p>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h1 id="price_detail">¥{{ goods.goods_price }}<span class="span1">500g</span></h1>
                </div>
            </div>
            <div class="col-xs-2">
                <p class="newheight">数量:</p>
            </div>
            <div class="input-group col-xs-3">
                <span class="input-group-addon" id="btn_add">+</span>
                <input type="text" class="form-control newwidth" value="1">
                <span class="input-group-addon" id="btn_sub">-</span>
            </div>
            <div class="col-xs-12">
                <p>总价:<span class="newprice" id="newprice">16.80元</span></p>
            </div>
            <p class="col-xs-3"><a class="btn btn-danger btn-lg" href="#" role="button">立即购买</a></p>
            <p class="col-xs-3"><a class="btn btn-danger btn-lg" href="bootstrap_cart.html" role="button">加入购物车</a></p>
        </div>
    </section>
    <section class="container newspace">
        <div class="col-xs-12 col-sm-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title text-center newheight">新品推荐</h3>
                </div>
                <div class="panel-body">
                    <div class="col-xs-12 col-sm-12">
                        <a href="#" class="thumbnail">
                            <img src="/static/buyer/images/goods/goods001.jpg" class="img-responsive">
                            <p class="text-center">进口柠檬</p>
                            <p class="text-center">￥3.90</p>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <a href="#" class="thumbnail">
                            <img src="/static/buyer/images/goods/goods002.jpg" class="img-responsive">
                            <p class="text-center">玫瑰香葡萄</p>
                            <p class="text-center">￥16.80</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-10">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">商品介绍</a></li>
                <li><a href="#profile" data-toggle="tab">评论</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <h3>商品详情</h3>
                    <p>{{ goods.desc_content }}</p>
                </div>
                <div class="tab-pane" id="profile">...</div>
            </div>

        </div>
    </section>
{% endblock %}

{% block script %}
    <script>
        $(function () {
            $("#btn_add").click(function () {
                var value = $(this).next().val();
                value = parseInt(value);
                value += 1;
                $(this).next().val(value);
                /*取价格的html文本单位*/
                var htmls = $("#price_detail").html()
                /*用span进行切分,取出价格，转换成float型*/
                prices = htmls.split("span");
                price = prices[0];
                price = price.substring(1, price.length - 1);
                price = parseFloat(price);
                total = value * price;
                total = total.toFixed(2);
                /*求总价修改总价栏*/
                $("#newprice").text(total + "元")
            });
            $("#btn_sub").click(function () {
                var value = $(this).prev().val();
                value = parseInt(value);
                value -= 1;
                value = value <= 1 ? 1 : value;
                $(this).prev().val(value);
                /*取价格的html文本单位*/
                var htmls = $("#price_detail").html()
                /*用span进行切分,取出价格，转换成float型*/
                prices = htmls.split("span");
                price = prices[0];
                price = price.substring(1, price.length - 1);
                price = parseFloat(price);
                total = value * price;
                /*求总价修改总价栏*/
                $("#newprice").text(total.toFixed(2) + "元")
            });
        })
    </script>
{% endblock %}